<template>
	<section class="wrapper-ed" @keyup.enter="doLogin">
		<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
			<el-row>
				<el-col :span="4">
					<el-form-item label="被投诉方名称">
						<el-input placeholder="被投诉方名称" v-model="filter.entityOwnerName" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="处理时间:" width="100">
						<el-date-picker size="small" style="width: 100%;" :picker-options='pickerOptions1' v-model="GmtCreate" type="datetimerange" start-placeholder="开始日期"
										end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				
				
				<el-col :span="4">
					<el-form-item label="品牌名称:">
						<el-input placeholder="品牌名称" v-model="filter.brandName" size="small"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="知识产权类型:">
						<el-select v-model="filter.intellectualStr" size="small">
							<el-option label="全部" value=""></el-option>
							<el-option label="商标权" value="商标权"></el-option>
							<el-option label="专利权" value="专利权"></el-option>
							<el-option label="著作权" value="著作权"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				

				<el-col :span="4">
					<el-form-item label="屏蔽状态:">
						<el-select v-model="filter.appealFlag" size="small">
							<el-option label="全部" value=""></el-option>
							<el-option label="正常" value="1"></el-option>
							<el-option label="屏蔽" value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24" class="action_col">
					<el-form-item class="action_button_group_open">
						<el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
						</el-button>
						<el-button size="small" type="primary" @click="getlistsS" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span='24' class="hide_and_show">
					<el-form-item class="action_button_group_open">
						<el-button size="small" @click="shieldBox" :disabled="pingbi">
							</i>屏蔽
						</el-button>
						<el-button size="small" @click="noShield" :disabled="cancelpingbi">撤销屏蔽</el-button>&nbsp;&nbsp;
						<a size="small" @click="exportTable()" class="export">
							<el-button size="small" icon="el-icon-zoom-in">导出</el-button>
						</a>
					</el-form-item>
				</el-col>

			</el-row>

			<el-row>
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane :label="number1"  name=" "></el-tab-pane>
					<el-tab-pane :label="number2" name="已提交"></el-tab-pane>
					<el-tab-pane :label="number3" name="待申诉"></el-tab-pane>
					<el-tab-pane :label="number4" name="审核不通过"></el-tab-pane>
					<el-tab-pane :label="number5" name="卖家申诉成立"></el-tab-pane>
					<el-tab-pane :label="number6" name="卖家已申诉-待投诉方响应"></el-tab-pane>
					<!--<el-tab-pane :label="number7" name="审核通过-卖家申诉中"></el-tab-pane>-->
					<el-tab-pane :label="number8" name="链接已删除"></el-tab-pane>
					<el-tab-pane :label="number9" name="卖家申诉不成立"></el-tab-pane>
					<el-tab-pane :label="number10" name="投诉方已撤诉"></el-tab-pane>
					<el-tab-pane :label="number11" name="小二已介入"></el-tab-pane>
				</el-tabs>
			</el-row>


			<el-row>
				<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="投诉信息" min-width="230" align="center">
						<template scope="scope">
							<br />
							<div>{{ scope.row.entityOwnerName }}<span>　({{scope.row.entityOwnerId}})</span></div>
							<a :href="scope.row.listhrefs" target="_blank">{{scope.row.listhrefs}}</a>
							<div v-show="scope.row.entityValid == 'false'">（已删除）</div>
							<div>投诉单号:{{scope.row.batchId}}</div>
							<div>处理时间：{{scope.row.appealDate}}</div>
							<br />
						</template>
					</el-table-column>
					<el-table-column label="处理状态/备注" min-width="130" align="center">
						<template scope='scope'>
							<div>{{scope.row.statusStr}}</div>
							<div class="asd" v-show="scope.row.complaintRemark != 'null' ">{{scope.row.complaintRemark}}</div>
						</template>

					</el-table-column>
					<el-table-column label="知识产权" min-width="280">
						<template scope="scope"> 
							<br>
							 <div> {{scope.row.iprName}} </div>
							 <div><span>申诉时间：</span>{{scope.row.appealDate}}</div>
							 <div v-if="showORhide"> <span>申诉理由：</span><span class="reason">{{scope.row.iprHistoryVOList[0].description}}</span></div>
							 <div v-if="showORhide"> <span >申诉凭证：</span><span class="deeppink" @click="doneLoad(scope.row)">{{scope.row.iprHistoryVOList[0].attachsList[0].fileName}}</span></div>
							<strong class="deeppink" @click="transDialog(scope.row)">[历史申诉]</strong> >
						</template>
					</el-table-column>
					<el-table-column prop="brandName" label="品牌名称" min-width="100" align="center">
					</el-table-column>
					<el-table-column prop="intellectualStr" label="知识产权类型" min-width="90" align="center">
					</el-table-column>
					<el-table-column prop="saleMemberName" label="销售" min-width="70" align="center">
					</el-table-column>
					<el-table-column prop="dockMemberName" label="对接员" min-width="70" align="center">
					</el-table-column>
					
					<el-table-column prop="appealFlagName" label="屏蔽状态" min-width="70" align="center">
					</el-table-column>
				</el-table>

			</el-row>
			<el-row class="paging">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="pagingData.pageNum" :page-sizes="pagingData.pageSizes" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="pagingData.total">
				</el-pagination>
			</el-row>
			
			<!-- 历史申诉弹窗 -->

			 <el-dialog title="历史申诉" :visible.sync="dialogTableVisible" @close="closeDialog">
	            
				<el-table :data="tableDataHistory" >
					<el-table-column  label="投诉时间" min-width="130" align="center" prop="gmtCreate">
					</el-table-column>
					<el-table-column  label="申诉理由：" min-width="230" align="center" prop="description">
					</el-table-column>
					<el-table-column  label="申诉凭证：" min-width="80" align="center" prop="">
						<template scope="scope">
		                        <div class="operator-btn ">
		                            prooFlie
		                        </div>
	                    </template>
					</el-table-column>
					
				</el-table>
	        </el-dialog>

			<!--导出的表格--> 
			<el-row class="margin-table1">
				<el-table ref="multipleTable" :data="tableDataCheck" border id="table01">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="投诉信息" min-width="230" align="center">
						<template scope="scope">
							<br />
							<div>{{ scope.row.entityOwnerName }}<span>　({{scope.row.entityOwnerId}})</span></div>
							<a :href="scope.row.listhrefs" target="_blank">{{scope.row.listhrefs}}</a>
							<div v-show="scope.row.entityValid == 'false'">（已删除）</div>
							<div>投诉单号:{{scope.row.batchId}}</div>
							<div>处理时间：{{scope.row.appealDate}}</div>
							<br />
						</template>
					</el-table-column>
					<el-table-column label="处理状态/备注" min-width="130" align="center">
						<template scope='scope'>
							<div>{{scope.row.statusStr}}</div>
							<div class="asd" v-show="scope.row.complaintRemark != 'null' ">{{scope.row.complaintRemark}}</div>
						</template>

					</el-table-column>
					<el-table-column label="知识产权" min-width="280">
						<template scope="scope"> 
							<br>
							 <div> {{scope.row.iprName}} </div>
							 <div><span>申诉时间：</span>{{scope.row.appealDate}}</div>
							 <div > <span>申诉理由：</span><span class="reason">{{scope.row.iprHistoryVOList[0].description}}</span></div>
							 <div> <span>申诉凭证：</span>{{scope.row.iprHistoryVOList[0].attachsList[0].fileName}}</div>
							<div class="deeppink"> [历史申诉]</div>
						</template>
					</el-table-column>
					<el-table-column prop="brandName" label="品牌名称" min-width="100" align="center">
					</el-table-column>
					<el-table-column prop="intellectualStr" label="知识产权类型" min-width="90" align="center">
					</el-table-column>
					<el-table-column prop="saleMemberName" label="销售" min-width="70" align="center">
					</el-table-column>
					<el-table-column prop="dockMemberName" label="对接员" min-width="70" align="center">
					</el-table-column>
					<el-table-column label="处理状态/备注" min-width="140" align="center">
						<template scope='scope'>
							<div>{{scope.row.statusStr}}</div>
							<div class="asd" v-show="scope.row.complaintRemark != 'null' ">{{scope.row.complaintRemark}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="appealFlagName" label="屏蔽状态" min-width="70" align="center">
					</el-table-column>
				</el-table>

			</el-row>

		</el-form>
	</section>
</template>

<script>
	import Vue from 'vue'
	import { mapGetters } from 'vuex'
	import { Row, Col, Form, FormItem, Button, Select, Option,Dialog, DatePicker, Table, Pagination, TableColumn, Input, Tabs, TabPane, Message, MessageBox } from 'element-ui';
	import { getDate, getArraySub, getLevelName, validTel, setToken, getCookie } from '../../utils/auth';

	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Button);
	Vue.use(Select);
	Vue.use(Input);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(Table);
	Vue.use(Tabs);
	Vue.use(TabPane);
	Vue.use(TableColumn);
	Vue.use(Pagination);
	Vue.use(Dialog);
	Vue.prototype.$message = Message;
	Vue.prototype.$confirm = MessageBox.confirm;
	export default {
		head() {
			return {
				title: this.title,
			}
		},
		data() {
			return {
				pro:"prof;enam",
				number1:"全部",
				number2:"已提交",
				number3:"待申诉",
				number4:"审核不通过",
				number5:"卖家申诉成立",
				number6:"卖家已申诉-待投诉方响应",
//				number7:"审核通过-卖家申诉中",
				number8:"链接已删除",
				number9:"卖家申诉不成立",
				number10:"投诉方已撤诉",
				number11:"小二已介入",
				activeName: ' ',//tabs默认 全部高亮
				tableDataCheck:[],
				tabName: '审核通过',
				title: "审核通过",
				filter: {
					brandName: '', //品牌名称
					entityOwnerName: '', //被投诉方名称
					intellectualStr: '', //知识产权类型
					statusStr: '', //处理状态
					appealFlag: '', //投诉状态
					pageSize: 10,
					pageNum: 1, //页码
					appealId: '',
					appealDateBegin: '', //创建时间开始
					appealDateEnd: '', //创建时间结束
				},
				pickerOptions1: { //处理时间只能选择今天之前的
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				tableData: [],
				tableDataHistory:[],
				pagingData: {
					pageSizes: [10, 20, 50, 1000], // 每页可选条数列表,
					total: 0,
					pageNum: 1
				},
				dialogTableVisible: false,//历史申诉弹窗默认关闭
				multipleSelection: [], //checkbox选中客户列表数据
				GmtCreate: [], //创建时间
				mapAppealFlags: [], //chaeckbox选中列表数据的屏蔽状态
				brr: [],
				pingbi: false, //屏蔽按钮的禁用与否
				cancelpingbi: false, //撤销屏蔽按钮的禁用与否
				showORhide:true,//申诉凭证是否显示
			}
		},
		computed: {
			...mapGetters({
				'pageTabsList': 'getPageTabsList'
			})
		},
		filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true);
            }
        },
		methods: {
			getlistsS(){
				this.getlists();
				this.getAccount();
			},
			handleClick(tab, event) {
				this.filter.statusStr = tab.paneName;
				this.getlists();
			},
			//点击enter实现搜索
			doLogin(event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode == 13) {
					this.getlists();
				}
			},
			 closeDialog () {
                this.dialogTableVisible = false;
            },
            transDialog (row) {
            	this.dialogTableVisible = true;
            	this.$store.dispatch('getIprhistory', {detailId: row.id})
                .then((response) => {
                    if(!response){return}
                   this.tableDataHistory = response.data.data
                 })
                   
            },
            doneLoad(row) {

            	let arr = [];
                let key;
                var token = window.localStorage.getItem('token');
                var params = {
                	userId:row.iprUserId,
                	brandId:row.brandId,
                	iprUserId:row.iprUserId,
                	objectName:row.iprHistoryVOList[0].attachsList[0].objectName
                }
                for(key in params){
                    arr.push(key+'='+params[key])
                }
                arr.push('token='+token);
                var p =arr.join("&");
                var a = document.createElement('a');
                a.href = process.env.baseUrl + '/appeal/downLoad?'+p;
                //a.target = '_blank';
                a.id='downloadprofile';
                document.body.appendChild(a);
                var alink = document.getElementById('downloadprofile');
                alink.click();
                alink.parentNode.removeChild(a);
            	
  
            },
			empty() {
				let pageSize = this.filter.pageSize;
				let pageNum = this.filter.pageNum;
				this.filter = {
						brandName: '', //品牌名称
						entityOwnerName: '', //被投诉方名称
						intellectualStr: '', //知识产权类型
						statusStr: '', //处理状态
						appealFlag: '', //投诉状态
						pageSize: pageSize,
						pageNum: pageNum, //页码
						appealId: '',
						appealDateBegin: '', //创建时间开始
						appealDateEnd: '', //创建时间结束
					},
					this.GmtCreate = []; //创建时间
				this.geturl();
			},
			geturl() {
				let url = location.search;
				if(url.indexOf("?") != -1) {
					let str = url.substr(1);
					let strs = str.split("&");
					let ids = strs[0].substr(3);
					this.filter.appealId = parseInt(ids);
					let titname = strs[1].substr(8)
					this.tabName = titname;
					if(this.pageTabsList[this.pageTabsList.length - 1].name == 'CRM') {
						let arr = this.pageTabsList;
						arr[arr.length - 1].name = this.tabName;
						this.$store.commit('PAGETABSLIST', {
							data: arr
						})
					}
				}
			},
			getAccount() {
				this.$store.dispatch('getAppealDetailInfoListCOUNT',this.filter).then((response) => {
					if(!response) {
						return
					}
					let accountList = response.data;
					if(accountList.successed == true) {
						this.number1 = "全部 ("+accountList.data.allCount+")";
						this.number2 = "已提交 ("+accountList.data.submitted+")";
						this.number3 = "待申诉 ("+accountList.data.auditPass+")";
						this.number4 = "审核不通过 ("+accountList.data.auditNoPass+")";
						this.number5 = "卖家申诉成立 ("+accountList.data.appealPass+")";
						this.number6 = "卖家已申诉-待投诉方响应 ("+accountList.data.appeal+")";
//						this.number7 = "审核通过-卖家申诉中 ("+accountList.data.auditPass+")";
						this.number8 = "链接已删除 ("+accountList.data.invalid+")";
						this.number9 = "卖家申诉不成立 ("+accountList.data.appealNoPass+")";
						this.number10 = "投诉方已撤诉 ("+accountList.data.withdrawal+")";
						this.number11 = "小二已介入 ("+accountList.data.involved+")";
					}
				})
			},
			getlists() {
//				this.getAccount();
				if(this.GmtCreate && this.GmtCreate[0]) {
					this.filter.appealDateBegin = this.GmtCreate[0] ? getDate(this.GmtCreate[0], true) : '';
					this.filter.appealDateEnd = this.GmtCreate[1] ? getDate(this.GmtCreate[1], true) : '';
				} else {
					this.filter.appealDateBegin = '';
					this.filter.appealDateEnd = '';
				}
				var Id = this.filter.appealId;
				this.$store.dispatch('getAppealDetailInfoList', this.filter ) .then((response) => {
						if(!response) {
							return
						}
						let result = response.data;
						if(result.successed == true ) {
							this.tableData = result.data.list;
							for(let i = 0; i < this.tableData.length; i++) {
								//this.tableData[i].serialnumber = this.tableData[i].id;
								this.tableData[i].listhrefs = this.tableData[i].entityKeyUrl;
								if(this.tableData[i].iprHistoryVOList != null){
									this.showORhide = true;
								}else{
									this.showORhide = false;
								}
							}
							this.pagingData.total = result.data.total;
							this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
						} else if(result.data = null) {
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						} else {
							this.customerList = [];
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						}
					})

			},

			//表格的全选和单选
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
    	    	this.tableDataCheck=val;
				if(this.tableDataCheck.length==0){
    	    		document.getElementsByClassName("export")[0].removeAttribute('href');
    	    	}
				let ids = [];
				let appealFlag = [];
				for(let i = 0; i < val.length; i++) {
					ids.push(val[i].id);
					appealFlag.push(val[i].appealFlag);
				}
				this.multipleSelection = ids;
				this.mapAppealFlags = appealFlag;
				var arr = this.mapAppealFlags;
				this.brr = Array.from(new Set(arr));
				if(this.brr.length == 1) {
					for(let i = 0; i < this.brr.length; i++) {
						if(this.brr[i] == 1) {
							this.cancelpingbi = true;
							this.pingbi = false;
						} else {
							this.cancelpingbi = false;
							this.pingbi = true;
						}
					}
				} else if(arr.length == 0) {
					this.cancelpingbi = false;
					this.pingbi = false;
				}
			},

			//屏蔽
			shieldBox() {
				if(this.multipleSelection == '') {
					this.$message.error('请先选择品牌');
					return;
				} else {
					if(this.brr.length !== 1) {
						Message.error({
							message: '请选择相同投诉状态操作'
						});
					} else {
						this.$confirm('确定屏蔽所选投诉吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							var arrids = this.multipleSelection;
							var canshu = arrids.join(",");
							this.$store.dispatch('shieldAppealDetailInfo', {
									detailIds: canshu,
									type: 2
								})
								.then((response) => {
									let result = response.data;
									if(result.successed == true) {
										this.getlists({
											pageNum: 1,
											pageSize: 10
										});
										Message.success({
											message: '屏蔽成功'
										});
									} else {
										Message.error({
											message: '屏蔽~失败'
										})
									}
								})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消屏蔽'
							});
						});
					}
				}
			},
			//撤销屏蔽
			noShield() {
				if(this.multipleSelection == '') {
					this.$message.error('请先选择品牌');
					return;
				} else {
					if(this.brr.length !== 1) {
						Message.error({
							message: '请选择相同投诉状态操作'
						});
					} else {
						this.$confirm('确定撤销屏蔽吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							var arrids = this.multipleSelection;
							var canshu = arrids.join(",");
							this.$store.dispatch('shieldAppealDetailInfo', {
									detailIds: canshu,
									type: 1
								})
								.then((response) => {
									let result = response.data;
									if(result.successed == true) {
										this.getlists({
											pageNum: 1,
											pageSize: 10
										});
										Message.success({
											message: '撤销屏蔽成功'
										});
									} else {
										Message.error({
											message: '撤销屏蔽~失败'
										})
									}
								})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消屏蔽'
							});
						});
					}
				}

			},
			handleCurrentChange(val) {
				this.filter.pageNum = val;
				this.tableDataCheck=[];
				this.getlists(this.filter);
			},
			handleSizeChange(val) {
				this.filter.pageSize = val;
				this.filter.pageNum = 1;
				this.getlists(this.filter);
			},
			exportTable() { //将表格内容导出到excel中
				if(this.tableDataCheck.length==0){
					this.$message({type: 'error',message: '请先选择要导出的投诉进度信息'});
					return false;
				}else{
				
					let html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById('table01').outerHTML + "</body></html>";
					// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
					let blob = new Blob([html], {
						type: "application/vnd.ms-excel"
					});
					let a = document.getElementsByClassName("export")[0];
					// 利用URL.createObjectURL()方法为a元素生成blob URL
					a.href = URL.createObjectURL(blob);
					// 设置文件名，目前只有Chrome和FireFox支持此属性
					a.download = "投诉详情列表.xls";
				}

			},
		},
		created() {
			//pageTab

		},
		mounted() {
			//    	var nums = this.$route.query.numbers;
			//    	this.tabName = nums;
			this.geturl();
			this.getlists();
			this.getAccount();
		},
		watch: {
			$route() {
				this.geturl();
				this.getlists();
			}
		}
	}
</script>

<style lang="scss">
	.wrapper-ed {
		a,
		a:hover,
		a:focus,
		a:visited {
			-webkit-text-decoration-line: underline;
			text-decoration-line: underline;
		}
		.paging {
			margin-top: 20px;
		}
		.el-tabs__header{
			padding-left:0px!important;
		}
		.el-tabs__item{
			padding:0 10px!important;
		}
		
		.deeppink{
			color:#409EFF;
			cursor: pointer;
		}
		.margin-table1{z-index: 0 !important;opacity: 0;height:0 !important;overflow: hidden;}
		.el-form {
			.el-form-item {
				width: 70%
			}
			.asd {
				font-size: 13px;
				color: #7A7A7A;
			}
		}
	}
</style>